<script setup>
import { ref } from 'vue'
import {store} from "@/store.js";
import {ElMessage} from "element-plus";
const props = defineProps({
  picUrl: String,
  allowCircle: {
    type: Boolean,
    default: false
  },
  cardNo: Number
})
const emit = defineEmits(['reverseCard'])

let reversed = ref(false)
function reverseCard() {
  if (store.lotteryTimes <= 0) {
    ElMessage({
      showClose: false,
      message: '已经没有次数了',
      type: 'error'
    })
  } else {
    if (!reversed.value) {
      store.reduceTimes(1)
    }
    if (props.allowCircle) {
      reversed.value = !reversed.value
    } else {
      reversed.value = true
    }

    store.hitCard(props.cardNo - 1)
    console.log(`call hitCard at ${props.cardNo - 1}, store.hits: `)
    console.log(store.hits)

  }
  emit('reverseCard')
}

</script>

<template>
  <div @click="reverseCard" class="card-wrap" :class="{ turn: reversed }">
    <div class="card-page front">
      <slot name="front"></slot>
    </div>
    <div class="card-page back">
      <slot name="back"></slot>
    </div>
  </div>

</template>

<style scoped>
.card-wrap {
  border: 1px #b3e19d solid;
  height: 180px;
  margin: 5px;
  //background-color: #ffff29;
  position: relative;
  transform-style: preserve-3d;
  transition: 1s;
}

.card-page {
  /* 相对于祖元素定位偏移 */
  position: absolute;
  /* 左上角对齐 */
  left: 0;
  top: 0;
  /* 转到背面时不可见 */
  backface-visibility:hidden;
}

.back {
  /* 背面本身自带180°旋转 */
  transform: rotateY(180deg);
}

.turn {
  /*  翻转180° */
  transform: rotateY(180deg);
}
</style>